<template>
  <div>
    <div class="home flex-around">
      <div class="son-con">
        <div class="son-tit">图像地物提取结果</div>
        <div class="sons flex-center">
          <div class="son" v-for="(item, index) in diwuURLs" :key="index">
            <div
              class="img"
              :style="{ backgroundImage: `url(${item.imageUrl})` }"
              @dblclick="previewImg(item)"
            ></div>
            <div class="time-wrap flex-center">
              <div class="time">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="son-con">
        <div class="son-tit">图像目标识别结果</div>
        <div class="sons flex-center">
          <div class="son" v-for="(item, index) in mubiaoURLs" :key="index">
            <div
              class="img"
              :style="{ backgroundImage: `url(${item.imageUrl})` }"
              @dblclick="previewImg(item)"
            ></div>
            <div class="time-wrap flex-center">
              <div class="time">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="son-con">
        <div class="son-tit">视频目标检测跟踪结果</div>
        <div class="sons flex-center">
          <div class="son" v-for="(item, index) in videoMBList" :key="index">
            <d-player class="video" :options="item.options"></d-player>
            <div class="time-wrap flex-center">
              <div class="time">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="son-con">
        <div class="son-tit">语音识别结果</div>
        <div class="audio-item first-item flex-center">
          <div class="num">序号</div>
          <!-- <div class="title">标题</div> -->
          <div class="audio"></div>
          <div class="playbtn flex-center">音频</div>
        </div>
        <div
          class="audio-item flex-center"
          v-for="(item, index) in audioUrlArray"
          :class="'demo-' + index"
          :key="index"
        >
          <div class="num">{{ index + 1 }}</div>
          <!-- <div class="title">{{ item.fileName }}</div> -->
          <vue-audio-native
            class="audio"
            size="default"
            :url="item.fileUrl"
            :showCurrentTime="showCurrentTime"
            :showControls="showControls"
            :showVolume="showVolume"
            :showDownload="showDownload"
            :autoplay="autoplay"
            :hint="hint"
            :waitBuffer="waitBuffer"
            :downloadName="downloadName"
            @on-audioId="audioId"
            @on-end="end"
          >
          </vue-audio-native>
          <div
            class="playbtn"
            :style="{
              backgroundImage: `url(${
                choosedId == index ? playBtnZT : playBtnBF
              })`,
            }"
            @click="togglePlayBtn(index)"
          ></div>
        </div>
      </div>
      <div class="son-con">
        <div class="son-tit">战场环境分析结果</div>
        <div class="sons flex-center">
          <div class="son" v-for="(item, index) in zclist" :key="index">
            <div
              class="img"
              :style="{ backgroundImage: `url(${item.imageUrl})` }"
              @dblclick="previewImg(item)"
            ></div>
            <div class="time-wrap flex-center">
              <div class="time">{{ item.time }}</div>
            </div>
          </div>
        </div>
        <!-- <div
          class="big-img"
          :style="{ backgroundImage: `url(${environmentImgURL})` }"
          @dblclick="previewImg({ imageUrl: environmentImgURL })"
        ></div>
        <div class="time-wrap flex-center">
          <div class="time">{{ environmentTime }}</div>
        </div> -->
      </div>
      <div class="son-con">
        <div class="son-tit">目标分析</div>
        <div class="sons flex-center">
          <div class="son" v-for="(item, index) in mbstlist" :key="index">
            <div
              class="img"
              :style="{ backgroundImage: `url(${item.imageUrl})` }"
              @dblclick="previewImg(item)"
            ></div>
            <div class="time-wrap flex-center">
              <div class="time">{{ item.time }}</div>
            </div>
          </div>
        </div>
        <!-- <div
          class="big-img"
          :style="{ backgroundImage: `url(${targetImgURL})` }"
          @dblclick="previewImg({ imageUrl: targetImgURL })"
        ></div>
        <div class="time-wrap flex-center">
          <div class="time">{{ targetTime }}</div>
        </div> -->
      </div>
    </div>
    <el-dialog width="100%" title="预览" :visible.sync="dialogVisible">
      <div class="preview-wrap">
        <img class="preview" :src="previewImgSRC" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueDPlayer from "vue-dplayer";
import "vue-dplayer/dist/vue-dplayer.css";
import { baseService } from "@/utils/configHttp";
export default {
  components: {
    "d-player": VueDPlayer,
  },
  data() {
    return {
      videoOptions: {
        autoplay: false,
        mutex: false,
        muted: true,
        volume: 0,
        preload: "metadata",
        video: {
          // url: "",
          autoplay: true,
          muted: true,
          type: "auto",
          volume: 0.1,
        },
        contextmenu: ["123"],
      },
      // 地物提取链接
      diwuURLs: [
        {
          imgURL: require("../assets/images/no_photo.png"),
        },
        {
          imgURL: require("../assets/images/no_photo.png"),
        },
        {
          imgURL: require("@/assets/images/no_photo.png"),
        },
        {
          imgURL: require("@/assets/images/no_photo.png"),
        },
      ],
      // 目标提取链接
      mubiaoURLs: [],
      videoMBList: [],
      // environmentImgURL: require("@/assets/images/no_photo.png"),
      zclist: [],
      mbstlist: [],
      environmentTime: "",
      targetImgURL: require("@/assets/images/no_photo.png"),
      targetTime: "",
      audioUrlArray: [
        // "http://mp3.9ku.com/m4a/183203.m4a",
        // require("../assets/222.mp3"),
        // require("../assets/222.mp3"),
        // "http://mp3.9ku.com/m4a/183203.m4a",
        // require("../assets/222.mp3"),
        // require("../assets/222.mp3"),
      ], //演示路径
      url: require("../assets/222.mp3"),
      showCurrentTime: true, //默认true，是否显示当前播放时间
      showControls: false, //默认false，true:展示原生音频播放控制条，false：展示模拟播放控制条
      showVolume: true, //默认true，默认显示音量调节和静音按钮 true显示音量调节和静音按钮
      showDownload: false, //默认true，默认显示下载按钮
      autoplay: false, //默认false，自动播放有效音频(由于高版本浏览器协议限制，初始化页面时无法自动播放，可以在点击页面后手动触发)
      waitBuffer: true, //默认true，拖拽到未加载的时间，是否需要等待加载，true:滑块位置不动，等待加载音频资源后播放，false：当滑动位置大于当前缓冲的最大位置，则重置到当前最大缓冲位置
      downloadName: "下载音频", //默认“下载音频”，在Chrome和火狐、同域名下，修改下载文件名称，其它保持原文件服务器名称
      hint: "音频正在加载中，请稍等…", //无音频情况下提示文案
      currentAudioId: [], //当前正在播放的audio id数组
      dialogVisible: false,
      previewImgSRC: "",
      interval: null,
      choosedId: null,
      lastChoosedId: null,
      playBtnZT: require("@/assets/images/zanting.svg"),
      playBtnBF: require("@/assets/images/bofang.svg"),
    };
  },
  created() {
    this.dataInit();
    this.interval = setInterval(() => {
      this.dataInit();
    }, 10000);
  },
  methods: {
    togglePlayBtn(index) {
      if (this.currentAudioId.length == 0) {
        return false;
      }
      console.log(111, index, this.lastChoosedId);
      this.choosedId = index;
      // let index = Number(item.id) % this.pagesize;
      // if (index == 0) index = 10;
      // index = index - 1;
      if (this.lastChoosedId == index) {
        console.log(index);
        document.getElementById(this.currentAudioId[index]).pause();
        this.lastChoosedId = null;
        this.choosedId = null;
        return false;
      }
      console.log(111, index, this.currentAudioId);
      this.currentAudioId.forEach((key, i) => {
        if (i == index) {
          document.getElementById(this.currentAudioId[i]).play();
          this.lastChoosedId = index;
        } else {
          document.getElementById(this.currentAudioId[i]).pause();
        }
      });
    },
    //获取渲染能够播放音频currentAudioId，可存全局，用以播放和暂停音频
    audioId(event) {
      console.log(event, 9999999);
      if (this.currentAudioId.length >= this.audioUrlArray.length) {
        this.currentAudioId.shift();
      }
      this.currentAudioId.push(event);
    },
    //获取到音频停止的事件，true为
    end(event) {
      if (event == true) {
        this.choosedId = null;
      }
      console.log(event, 281789);
    },
    //获取到音频停止的事件，true为
    // end(event) {
    //   if (event == true) {
    //     this.choosedId = null;
    //   }
    //   console.log(event, 281789);
    // },
    //通过音频列表的下标获取渲染能够播放音频currentAudioId即组件的id，并使用组件的id，用来开始播放录音
    play(index) {
      document.getElementById(this.currentAudioId[index]).play();
    },
    //通过音频列表的下标获取渲染能够播放音频currentAudioId即组件的id，并使用组件的id，，用来暂停播放录音
    pause(index) {
      document.getElementById(this.currentAudioId[index]).pause();
    },
    previewImg(item) {
      this.dialogVisible = true;
      this.previewImgSRC = item.imageUrl;
    },
    dataInit() {
      baseService
        .get("/getPortalInfo")
        .then((res) => {
          console.log(1111, res);
          this.diwuURLs = res.imageDWList.map((item) => {
            return {
              imageUrl: process.env.VUE_APP_BASE_URL + item.imageUrl,
              time: item.time,
            };
          });
          this.mubiaoURLs = res.imageMBList.map((item) => {
            return {
              imageUrl: process.env.VUE_APP_BASE_URL + item.imageUrl,
              time: item.time,
            };
          });
          this.videoMBList = res.videoMBList.map((item) => {
            return {
              // videoUrl: process.env.VUE_APP_BASE_URL + item.videoUrl,
              time: item.time,
              options: {
                autoplay: false,
                mutex: false,
                muted: true,
                volume: 0,
                preload: "metadata",
                video: {
                  url: process.env.VUE_APP_BASE_URL + item.videoUrl,
                  autoplay: true,
                  muted: true,
                  type: "auto",
                  volume: 0.1,
                },
                contextmenu: ["123"],
              },
            };
          });
          this.audioUrlArray = res.audioList.map((item) => {
            return {
              fileUrl: process.env.VUE_APP_BASE_URL + item.fileUrl,
              fileName: item.fileName,
            };
          });
          // this.targetImgURL =
          //   process.env.VUE_APP_BASE_URL + res.mbstlist[0].imageUrl;
          // this.targetTime = res.mbstlist[0].time;

          // this.environmentImgURL =
          //   process.env.VUE_APP_BASE_URL + res.zclist[0].imageUrl;
          // this.environmentTime = res.zclist[0].time;
          this.zclist = res.zclist.map((item) => {
            return {
              imageUrl: process.env.VUE_APP_BASE_URL + item.imageUrl,
              time: item.time,
            };
          });
          this.mbstlist = res.mbstlist.map((item) => {
            return {
              imageUrl: process.env.VUE_APP_BASE_URL + item.imageUrl,
              time: item.time,
            };
          });
        })
        .catch((err) => {
          console.log(err.msg);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  margin: 0 auto;
  color: #00def4;
  font-size: 12px;
  flex-wrap: wrap;
  padding: 0 0.3rem;
  padding-bottom: 0.3rem;
  margin-top: 0.1rem;
  line-height: 1;
  // background: pink;
  width: 18.07rem;
  border: 2px solid rgba(0, 216, 245, 0.35);
  .son-con {
    margin-top: 0.3rem;
    width: 5.49rem;
    height: 3.49rem;
    border-radius: 0.04rem;
    border: 0.02rem solid #00d8f5;
    overflow: hidden;
    .son-tit {
      margin-top: 0.08rem;
      font-size: 0.2rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #00d8f5;
      line-height: 0.24rem;
    }
    .sons {
      flex-wrap: wrap;
      .son {
        margin-top: 0.1rem;
        &:nth-child(2n + 1) {
          margin-right: 17px;
        }
        .img {
          width: 2.5rem;
          height: 1.1rem;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
        }
        .video {
          width: 2.5rem;
          height: 1.1rem;
        }
      }
    }
    .big-img {
      margin: 0 auto;
      margin-top: 0.1rem;
      width: 5.17rem;
      height: 2.53rem;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
  }
}
.time-wrap {
  margin-top: 0.1rem;
  .time {
    text-align: center;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #00d8f5;
  }
}
.audio-item {
  height: 0.6rem;
  text-align: center;
  &:nth-child(2n + 1) {
    background: linear-gradient(
      90deg,
      rgba(14, 40, 106, 0.5) 0%,
      #0e286a 50%,
      rgba(14, 40, 106, 0.5) 100%
    );
  }
  .num {
    width: 0.6rem;
  }
  .playbtn {
    width: 0.8rem;
    height: 0.6rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.4rem 0.4rem;
  }
  .title {
    width: 2.6rem;
    overflow: hidden;
  }
  ::v-deep .audio {
    width: 2rem;
    .iconfont {
      display: none;
    }
  }
}
::v-deep .dplayer {
  .dplayer-time {
    display: none;
  }
}
::v-deep .vueAudioNative {
  .dplayer-time {
    display: none;
  }
  width: 1.2rem;
  .audio-left {
    b {
      font-size: 0.3rem;
    }
    span {
      display: none;
    }
  }
  .audio-right {
    display: none;
  }
  .audio-muted {
    display: none;
  }
}
</style>